<template>
    <div>
        <div class="pices" v-if="datalist.length != 0">
            <div class="item" v-for="it in datalist" :key="it">
                <mylove @deleteone="deleteone" :item="it" />
            </div>
        </div>
        <div v-else style="text-align: center;font-size: 0.333rem;">
            没有更多了
        </div>
    </div>
</template>

<script setup>
import { getlove } from '@/api/articl'
import mylove from '@/components/loveitem/index.vue'
import { useRouter, useRoute } from 'vue-router';
import { onMounted, watch, ref } from 'vue';
import { GetCurrentUserId } from '@/utils/GetCurrentUserId'
import { ElMessage } from 'element-plus';
let $useRoute = useRoute()
let tempid = ref('')
let datalist = ref([])
let props = defineProps({
    catagrea: {
        type: Number,
        default: 0
    }
})
watch(() => props.catagrea, () => {
    console.log(props.catagrea)
    getlist()

})
onMounted(() => {
    console.log(GetCurrentUserId())
    if (props.catagrea == 0) {
        console.log('6566')
        getlove(Number(props.catagrea)).then(res => {
            console.log(res)
            datalist.value = res.data
            console.log(datalist)
        }).catch(err => {
            ElMessage({
                message: '登录过期',
                type: 'error'
            })
            console.log(err)
        })
    }
})
const getlist = () => {
    getlove(props.catagrea).then(res => {
        console.log(res)
        datalist.value = res.data
        console.log(datalist)
    }).catch(err => {
        console.log(err)
        ElMessage({
            message: '登录过期',
            type: 'error'
        })
    })
}
const deleteone = (e) => {
    console.log(e)
    datalist.value = datalist.value.filter(item => {
        return item._id != e
    })
}
</script>

<style lang="scss" scoped>
.pices {
    overflow: scroll;
    overflow-x: hidden;
    height: 95vh;
    flex-wrap: wrap;
    display: flex;

    .item {

        width: 20%;
        margin-bottom: 0.1333rem;
    }
}
</style>